<template>
  <div>
    <a-drawer
        size="large"
        :maskClosable="false"
        v-model:visible="ventingComp"
        class="custom-class"
        style="color: red"
        @close="closeIconDrawer"
        title="吐槽心情"
        placement="right">
      <div>
        吐槽内容:
        <a-textarea :maxlength="50" v-model:value="talkComment.text"></a-textarea>
      </div>
      <div style="margin-top: 10px">
        上传图片:
        <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            :multiple="true"
            :action="upLoadAction"
            @change="handleChange"
            :headers="headers"
            @drop="handleDrop">
          <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
          </p>
          <p class="ant-upload-text">点击或者上传文件</p>
        </a-upload-dragger>
      </div>
      <div style="margin: 20px 0">
        <img style="margin: 5px" :width="100" :height="200" :src="item" v-for="(item,index) in imageUrls"
             :key="index+'image'">
      </div>
      <template #extra>
        <a-button style="margin-right: 8px" @click="closeIconDrawer">取消</a-button>
        <a-button :loading="uploading" type="primary" @click="faBiao">发表</a-button>
      </template>
    </a-drawer>
  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRefs} from 'vue';
import {InboxOutlined} from '@ant-design/icons-vue';
import {constant} from "@/api/constant/constant";
import $localStorage from "@/api/storage/localStorage";
import $httpPost from "@/api/myAxios/PostApi";
import {message} from "ant-design-vue";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  name: "venting",
  components: {
    InboxOutlined
  },
  props: {
    ventingComp: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const imageUrls = reactive([])
    const fileList = ref([])
    const upLoadAction = constant.baseUrl + 'xy/talkImages/uploadTalkImage'
    let talkComment = reactive({
      text: ''
    });
    let {ventingComp} = toRefs(props);
    const faBiao = () => {
      let obj={content:talkComment.text,imageUrls:imageUrls}
      $httpPost("xy/talk/shareTalk",obj).then(res=>{
        if (res.data.code==0){
          context.emit('closeVentDrawer')
        }else {
         message.error("服务器繁忙...")
        }
      })
    }
    const closeIconDrawer = () => {
      context.emit('closeVentDrawer')
    }
    let uploading = ref(false);
    const handleChange = info => {
      if (imageUrls.length > 10) {
        message.error('超出上传图片的限制')
        return
      }
      const status = info.file.status;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        console.log(info.file.response)
        if (info.file.response.code == 0) {
          imageUrls.push(info.file.response.talkUrls)
        }
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    };

    return {
      ventingComp,
      faBiao,
      talkComment,
      closeIconDrawer,
      uploading,
      handleChange,
      fileList,
      handleDrop: e => {
        console.log(e);
      },
      upLoadAction,
      headers: {
        "token": $localStorage.get('token')
      },
      imageUrls
    };
  },
}
</script>

<style scoped>

</style>